<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no" />
	<title>消息</title>
	<link rel="stylesheet" type="text/css" href="../c/aui.css" />
	<style media="screen">

		.xiaoxi-top {
			margin: 0.75rem;
			border-bottom: 1px solid #222;
			overflow: hidden;
			padding-bottom: 1rem;
		}

		.xiaoxi-top div {
			text-align: center;
		}

		.xiaoxi-top img {
			width: 2.2rem;
			margin: 0 auto;
			border-radius: 0.2rem;
		}

		.xiaoxi-top p {
			color: #fff;
			font-size: 0.7rem;
			padding-top: 0.25rem;
		}

		.ad {
			background: #2f2f2f;
			height: 3rem;
			line-height: 3rem;
			margin: 0.75rem;
			text-align: center;
			font-size: 0.75rem;
			opacity: 0.5
		}

		.xiaoxi-list,
		.xiaoxi-list ul {
			background: none;
			color: #fff;
			border: 0;
		}

		.xiaoxi-list {
			border-top: 1px solid #222;
		}

		.xiaoxi-list .aui-list .aui-list-item {
			border-bottom: 0;
			background: none;
			padding-top: 0.5rem;
			padding-bottom: 0.5rem;
		}

		.xiaoxi-list .aui-list-item-media {
			width: 3.5rem;
		}

		.xiaoxi-list .aui-list-item-title {
			font-size: 0.85rem;
			color: #fff;
			opacity: 0.9
		}

		.xiaoxi-list .aui-list-item-right {
			color: #fff;
			font-size: 0.65rem;
			color: #999
		}

		.xiaoxi-list .aui-ellipsis {
			font-size: 0.7rem;
			color: #999;
			position: relative;
			padding-right: 1rem;
			padding-top: 0.25rem;
		}
		.xiaoxi-list .aui-ellipsis img{
			width: 1rem;
			display: inline-block;
		  vertical-align: middle;
		}

		.xiaoxi-list .aui-badge {
			right: 0;
			left: inherit;
			top: 0;
		}
	</style>
</head>

<body>
	<div class="xiaoxi-top aui-card-list-footer">
		<div tapmode onclick="_url({url:'member_fensi',title:'粉丝'})"><img src="../i/xiaoxi-fensi.png" />
			<p>粉丝</p>
		</div>
		<div tapmode onclick="_url({url:'member_zan',title:'赞'})"><img src="../i/xiaoxi-zan.png" />
			<p>赞</p>
		</div>
		<!-- <div tapmode onclick="_url({url:'member_wode',title:'@我的'})"><img src="../i/xiaoxi-wode.png" />
			<p>@我的</p>
		</div> -->
		<div tapmode onclick="_url({url:'member_ping',title:'评论'})"><img src="../i/xiaoxi-ping.png" />
			<p>评论</p>
		</div>
	</div>
	<div class="ad">
		广告招租
	</div>

	<div class="aui-card-list xiaoxi-list ">
		<div class="aui-card-list-content">
			<script id="sx-list" type="text/x-dot-template">
				{{ for(var i=0,it=it.result; i < it.length; i++) { }}
				{{? it[i].conversationType == 'PRIVATE'}}
				{{ var extra=_message_user(_extra(it[i].latestMessage.extra));}}
				<li class="aui-list-item aui-list-item-middle uid_{{= it[i].senderUserId}}">
					<div class="aui-media-list-item-inner">
						<div class="aui-list-item-media" tapmode onclick="_u({{= extra.uid}})">
							<img src="{{= extra.img?_img(extra.img,100) : '../i/touxiang.png'}}" class="aui-img-round">
						</div>
						<div class="aui-list-item-inner"  tapmode onclick="view({{= it[i].targetId}},{uid:'{{= extra.uid}}',img:'{{= extra.img}}',nickname:'{{= extra.nickname}}'})">
							<div class="aui-list-item-text">
								<div class="aui-list-item-title">{{= extra.nickname}}</div>
								<div class="aui-list-item-right">{{= dateStr(it[i].sentTime/1000)}}</div>
							</div>
							<div class="aui-ellipsis">
								{{= _text(it[i].latestMessage.text)}}
								{{? it[i].unreadMessageCount}}
								<div class="aui-badge">{{= it[i].unreadMessageCount}}</div>
								{{?}}
							</div>
						</div>
					</div>
				</li>
				{{?}}
				{{ } }}
			</script>
			<ul class="aui-list aui-media-list" id="sx-view"></ul>
		</div>
	</div>

</body>
<script type="text/javascript" src="../j/api.js"></script>

<script type="text/javascript">
	var rong,no=false;
	apiready = function() {
		rong = api.require('rongCloud2');
		list();
		// 回到屏幕
		api.addEventListener({
			name : 'viewappear'
		}, function(ret, err) {
			api.execScript({
					name: 'root',
					script: 'setOnReceiveMessageListener();'
			});
		});
		// 离开屏幕
		api.addEventListener({
			name : 'viewdisappear'
		}, function(ret, err) {
		});
		//应用进入后台事件
		api.addEventListener({
			name : 'pause'
		}, function(ret, err) {
		});
		// 应用从后台回到前台事件
		api.addEventListener({
			name : 'resume'
		}, function(ret, err) {
			list();
		});
		_shangla(function(){
			list()
		},1)
		// 接受消息
		api.addEventListener({
		    name: 'xiaoxi_data'
		}, function(ret, err) {
				view_data(ret.value);
		});
	}

	function list() {
		rong.getConversationList(function(ret, err) {
			if(ret.result.length){
				console.log(JSON.stringify(ret));
				var evalData = doT.template($api.html($api.byId('sx-list')));
			 	$api.html($api.byId('sx-view'), evalData(ret));
			}

			api.parseTapmode();
			api.refreshHeaderLoadDone();
			api.execScript({
			    name: 'root',
			    script: 'getTotalUnreadCount();'
			});
		})
	}
	// 打开单聊页
	function view(id,user){
		$('.uid_'+id+' .aui-badge').remove();
		_message(id,user)
	}
	// 插入聊天模板
	function view_data(ret){
		list();
		return;
		console.log("view_data:"+JSON.stringify(ret));
		// return;
		var targetId = ret.targetId;
		var senderUserId = ret.senderUserId
		var _this = $('.uid_'+ret.senderUserId);
		ret.latestMessage = ret.content;
		if(_this.text()){
			$('.uid_'+senderUserId).remove();
		}
		var evalData = doT.template($api.html($api.byId('sx-list')));
		$api.prepend($api.byId('sx-view'), evalData({"result":[ret]}));
		api.parseTapmode();
		// 获取来自某用户（某会话）的未读消息数
		rong.getUnreadCount({
		    conversationType: ret.conversationType,
		    targetId: ret.targetId
		}, function(ret_s, err) {
			console.log(JSON.stringify(ret_s));
			if(ret_s.result && ret_s.result!=0){
				var _this = $('.uid_'+senderUserId+' .aui-badge');
				if(_this.text()){
					_this.text(ret_s.result);
				}else{
					$('.uid_'+senderUserId+' .aui-ellipsis').append('<div class="aui-badge">'+ret_s.result+'</div>');
				}
			}
		})
	}
	// 时间戳
	function dateStr(date){
			//获取js 时间戳
			var time=new Date().getTime();
			//去掉 js 时间戳后三位，与php 时间戳保持一致
			time=parseInt((time-date*1000)/1000);
			//存储转换值
			var s;
			if(time<60){//十分钟内
					return time+'秒前';
			}else if((time<60*60)&&(time>=60)){
					//超过十分钟少于1小时
					s = Math.floor(time/60);
					return  s+"分钟前";
			}else if((time<60*60*24)&&(time>=60*60)){
					//超过1小时少于24小时
					s = Math.floor(time/60/60);
					return  s+"小时前";
			}else if((time<60*60*24*3)&&(time>=60*60*24)){
					//超过1天少于3天内
					s = Math.floor(time/60/60/24);
					return s+"天前";
			}else{
					//超过3天
					var date= new Date(parseInt(date) * 1000);
					return date.getFullYear()+"/"+(date.getMonth()+1)+"/"+date.getDate();
			}
	}
	// 清空所有对话
	function clearConversations(){
		rong.clearConversations({
		    conversationTypes: ['PRIVATE']
		},function(ret){
			api.refreshHeaderLoading();
		})
	}
</script>

</html>
